var myChart = echarts.init(document.getElementById("main"));
option = {
  //backgroundColor: '#000F1F',
  tooltip: {
    //弹窗
    /*trigger: 'item',
        formatter: function(params) {
            //根据值是否为空判断是点还是线段
            if(!isEmpty(params.data.source)){//如果鼠标移动到线条

            }else{//如果鼠标移动到点
                if(params.data.type == "zone"){
                    return params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置状态：启用";
                }else if(params.data.type == "cluster"){
                    return params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置状态：启用";
                }else if(params.data.type == "host"){
                    var msg = "";
                    msg += params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置状态：启用" + "<br>";
                    if(!isEmpty(params.data.connectStatus)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "连接状态：" + params.data.connectStatus + "<br>";
                    }
                    if(!isEmpty(params.data.roleName)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "宿主角色：" + params.data.roleName + "<br>";
                    }
                    msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "业务数量：" + params.data.businessCnt + "<br>";
                    if(!isEmpty(params.data.hostCpuCoreNum)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "CPU核心数：" + params.data.hostCpuCoreNum + "核<br>";
                    }
                    if(!isEmpty(params.data.hostRamSize)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "内存总容量：" + (params.data.hostRamSize/1024/1024).toFixed(2) + "GB<br>";
                    }
                    if(!isEmpty(params.data.hostRamUsedSize)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "内存已用量：" + (params.data.hostRamUsedSize/1024/1024).toFixed(2) + "GB<br>";
                    }
                    if(!isEmpty(params.data.hostRamAvailableSize)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "内存可用量：" + (params.data.hostRamAvailableSize/1024/1024).toFixed(2) + "GB<br>";
                    }
                    if(!isEmpty(params.data.hostRamUsed)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "内存占用百分比：" + (params.data.hostRamUsed*100).toFixed(2) + "%<br>";
                    }
                    if(!isEmpty(params.data.hostDiskTotalCapacityKB)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盘总容量：" + (params.data.hostDiskTotalCapacityKB/1024/1024).toFixed(2) + "GB<br>";
                    }
                    if(!isEmpty(params.data.hostDiskUsedKB)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盘已用量：" + (params.data.hostDiskUsedKB/1024/1024).toFixed(2) + "GB<br>";
                    }
                    if(!isEmpty(params.data.hostDiskAvailableKB)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "硬盘可用量：" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>";
                    }
                    if(!isEmpty(params.data.hostDiskUsed)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "硬盘可用量：" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>";
                    }
                    if(!isEmpty(params.data.hostDiskUsed)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盘占用百分比：" + (params.data.hostDiskUsed*100).toFixed(2) + "%<br>";
                    }
                    return msg;
                }else if(params.data.type == "vm"){
                    var msg = "";
                    msg += params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置状态：启用" + "<br>";
                    if(!isEmpty(params.data.instanceName)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "实例名称：" + params.data.instanceName + "<br>";
                    }
                    if(!isEmpty(params.data.comment)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "说明：" + params.data.comment + "<br>";
                    }
                    if(!isEmpty(params.data.applicationName)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "归属应用：" + params.data.applicationName + "<br>";
                    }
                    if(!isEmpty(params.data.vmCpuCoreNum)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "CPU核心数：" + params.data.vmCpuCoreNum + "核<br>";
                    }
                    if(!isEmpty(params.data.vmRam)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "内存大小：" + (params.data.vmRam/1024/1024).toFixed(2) + "GB<br>";
                    }
                    if(!isEmpty(params.data.vmTotalDiskCapacity)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盘总容量：" + (params.data.vmTotalDiskCapacity/1024/1024).toFixed(2) + "GB<br>";
                    }
                    if(!isEmpty(params.data.systemType)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "系统：" + params.data.systemType + "<br>";
                    }
                    if(!isEmpty(params.data.state)){
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "电源状态："  + params.data.state + "<br>";
                    }
                    return msg;
                }
            }
        }*/
  },
  color: ["#09022C", "#040193", "#073CFE", "#0065C2"],
  legend: {
    //=========小图标，圖表控件
    show: true,
    data: [
      {
        name: "区域",
        icon: "diamond" //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        //icon:'image://./images/icon1.png'  //如果用图片img，格式为'image://+icon文件地址'，其中image::后的//不能省略
      },
      {
        name: "集群",
        icon: "rect"
      },
      {
        name: "宿主机",

        icon: "roundRect"
      },
      {
        name: "云主机",
        icon: "circle"
      }
    ]
  },
  series: [
    {
      //图片配置
      type: "graph", //关系图
      //name : "拓扑图", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
      layout: "force", //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
      legendHoverLink: true, //是否启用图例 hover(悬停) 时的联动高亮。
      hoverAnimation: true, //是否开启鼠标悬停节点的显示动画
      coordinateSystem: null, //坐标系可选
      xAxisIndex: 0, //x轴坐标 有多种坐标系轴坐标选项
      yAxisIndex: 0, //y轴坐标
      force: {
        repulsion: 450, //相距距离
        edgeLength: [150, 200],
        layoutAnimation: true
      },
      /*force : { //力引导图基本配置
            //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
            repulsion : 200,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
            gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
            edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
            layoutAnimation : true
            //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
        },*/
      roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
      nodeScaleRatio: 0.6, //鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
      draggable: true, //节点是否可拖拽，只在使用力引导布局的时候有用。
      focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
      //symbol:'roundRect',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'（矩形）, 'roundRect'（圆角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大头针）, 'arrow'（箭头）  也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿
      //symbolSize:10 ,//也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array
      //symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
      //symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, '50%']
      edgeSymbol: ["none", "arrow"], //边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
      symbolSize: 50, //图形大小
      edgeSymbolSize: 10, //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
      itemStyle: {
        //===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
        normal: {
          //默认样式
          label: {
            show: true
          }
          //borderType : 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
          //borderColor : 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4
          //borderWidth : 2, //图形的描边线宽。为 0 时无描边。
          // opacity : 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
        },
        emphasis: {
          //高亮状态
        }
      },
      lineStyle: {
        //==========关系边的公用线条样式。
        normal: {
          color: "#31354B",
          width: "1",
          type: "solid", //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
          curveness: 0, //线条的曲线程度，从0到1
          opacity: 1
          // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
        },
        emphasis: {
          //高亮状态
        }
      },
      label: {
        //=============图形上的文本标签
        normal: {
          show: true, //是否显示标签。
          position: "bottom", //标签的位置。['50%', '50%'] [x,y]   'inside'
          textStyle: {
            //标签的字体样式
            color: "#2D2F3B", //字体颜色
            fontStyle: "normal", //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
            fontWeight: "bolder", //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
            fontFamily: "sans-serif", //文字的字体系列
            fontSize: 12 //字体大小
          }
        },
        emphasis: {
          //高亮状态
        }
      },
      edgeLabel: {
        //==============线条的边缘标签
        normal: {
          show: false
        },
        emphasis: {
          //高亮状态
        }
      },
      //别名为nodes   name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小
      //label:标签样式。
      //数据
      data: [
        {
          id: 0,
          name: "冲突.攻击",
          category: 0
        },
        {
          id: 1,
          name: "人员死亡",
          category: 1
        },
        // {
        //   id: 1,
        //   name: "人员死亡",
        //   category: 1,
        //   symbol: "image://http://127.0.0.1:5501/html/images/features-5.jpg",
        //   symbolSize: 50,
        //   //   type: "cluster",
        //   itemStyle: { normal: { color: "#040193" } }
        // },
        {
          id: 2,
          name: "88人",
          category: 2
        },
        {
          id: 3,
          name: "基辅",
          category: 2
        },
        {
          id: 4,
          name: "乌克兰",
          category: 2
        },
        {
          id: 5,
          name: "乌克兰政府",
          category: 3
        },
        {
          id: 6,
          name: "苏27",
          category: 2
        },
        {
          id: 7,
          name: "苏27图片",
          category: 3,
          symbol:
            "image://https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582794502359&di=535c519c0dc7525c5e9db0472e355f6e&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fmil%2Ftransform%2F20160130%2F6K0v-fxnzanm3853953.jpg",
          symbolSize: 80,
          type: "cluster",
          itemStyle: { normal: { color: "#040193" } }
        },
        {
          id: 8,
          name: "亲俄武装",
          category: 4
        },
        {
          id: 9,
          name: "转运",
          category: 5
        }
      ],
      links: [
        {
          source: 0,
          target: 1,
          //   lineStyle: {
          //     color: "#866da4",
          //     width: 3
          //   },
          label: {
            show: true,
            formatter: "引发"
          }
        },
        {
          source: 1,
          target: 2,
          label: {
            show: true,
            formatter: "受害者"
          }
        },
        {
          source: 0,
          target: 3,
          label: {
            show: true,
            formatter: "地点"
          }
        },
        {
          source: 3,
          target: 4,
          label: {
            show: true,
            formatter: "属于"
          }
        },
        {
          source: 4,
          target: 5,
          label: {
            show: true,
            formatter: "隶属"
          }
        },
        {
          source: 5,
          target: 6,
          lineStyle: {
            type: "dashed",
            width: 1
          },
          label: {
            show: true,
            formatter: "拥有0.9"
          }
        },
        {
          source: 6,
          target: 7,
          lineStyle: {
            type: "dashed",
            width: 1
          }
        },
        {
          source: 0,
          target: 8,
          label: {
            show: true,
            formatter: "冲突方"
          }
        },
        {
          source: 9,
          target: 8,
          lineStyle: {
            color: "#866da4",
            width: 3
          },
          label: {
            show: true,
            formatter: "接受者"
          }
        },
        {
          source: 5,
          target: 9,
          lineStyle: {
            color: "#866da4",
            width: 3
          },
          label: {
            show: true,
            formatter: "给予者"
          }
        }
      ], //edges是其别名代表节点间的关系数据。
      categories: [
        //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效
        {
          name: "大圆",
          x: 500,
          y: 300,
          fixed: true,
          symbol: "diamond",
          symbol: "circle",
          symbolSize: 80,
          type: "zone",
          itemStyle: { normal: { color: "#c22900" } },
          label: {
            position: "inside",
            align: "center",
            fontSize: 20
          }
        },
        {
          name: "中圆",
          symbol: "circle",
          symbolSize: 50,
          //   type: "cluster",
          itemStyle: { normal: { color: "#c22900" } },
          label: {
            position: "inside",
            align: "center"
          }
        },
        {
          name: "黄色三角",
          symbol: "triangle",
          symbolSize: 40,
          type: "host",
          itemStyle: { normal: { color: "#e48130" } },
          label: {
            color: "#e48130"
          }
        },
        {
          name: "灰色三角",
          symbol: "triangle",
          symbolSize: 50,
          type: "host",
          itemStyle: { normal: { color: "#838383" } },
          label: {
            color: "#838383"
          }
        },
        {
          name: "紫色三角",
          symbol: "triangle",
          symbolSize: 50,
          type: "host",
          itemStyle: { normal: { color: "#7e649e" } },
          label: {
            color: "#7e649e"
          }
        },
        {
          name: "紫色中圆",
          symbol: "circle",
          symbolSize: 40,
          //   type: "cluster",
          itemStyle: { normal: { color: "#7e649e" } },
          label: {
            position: "inside",
            align: "center"
          }
        }
      ]
    }
  ]
};
$(function(){
	
	
    $.ajax({
        //请求方式
        type : "POST",
        async : false,
        //请求地址
        url : "/getAllVertex",
        //数据，json字符串
        data : {},
        //请求成功
        success : function(result) {
            var serverdata = [];
            for(var i = 0;i < result.length;i++){
            	var vertexobj = {};
            	vertexobj["id"] = result[i].vId;
            	vertexobj["name"] = result[i].vName;
            	vertexobj["category"]= result[i].vCategory;
            	if(result[i]["vImage"]){
            		vertexobj["symbol"]= "image://"+result[i].vImage;
            		vertexobj["symbolSize"]= 80;
            		vertexobj["type"]= "cluster";
            		vertexobj["itemStyle"]= { normal: { color: "#040193" } };
            	}
            	serverdata.push(vertexobj);
            }
            option.series[0].data = serverdata;
            
        },
        //请求失败，包含具体的错误信息
        error : function(e){
            console.log(e.status);
            console.log(e.responseText);
        }
    });
    $.ajax({
    	//请求方式
    	type : "POST",
    	async : false,
    	//请求地址
    	url : "/getAllRelation",
    	//数据，json字符串
    	data : {},
    	//请求成功
    	success : function(result) {
    		var linksdata = [];
            for(var i = 0;i < result.length;i++){
            	var linkobj = {};
            	linkobj["source"] = result[i].rSource-1;
            	linkobj["target"] = result[i].rTarget-1;
            	linkobj["label"] = {
        			show: true,
                    formatter: result[i].label
            	}
            	
            	if(result[i]["label"] == ""){
            		linkobj["lineStyle"] = {
        				type: "dashed",
        	            width: 1	
            		};
            	}
            	if(result[i]["label"] == "拥有0.9"){
            		linkobj["lineStyle"] = {
        				type: "dashed",
        	            width: 1	
            		};
            	}
            	if(result[i]["label"] == "接受者"){
            		linkobj["lineStyle"] = {
        				color: "#866da4",
        	            width: 3	
            		};
            	}
            	if(result[i]["label"] == "给予者"){
            		linkobj["lineStyle"] = {
        				type: "#866da4",
        	            width: 3	
            		};
            	}
            	linksdata.push(linkobj);
            }
            option.series[0].links = linksdata;
    	},
    	//请求失败，包含具体的错误信息
    	error : function(e){
    		console.log(e.status);
    		console.log(e.responseText);
    	}
    });
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
});


